<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <title>counter计数器</title>
  <style>
    .reset {
      counter-reset: counter;
      padding-left: 20px;
    }

    .counter {
      margin-top: 20px;
      counter-increment: counter;
    }

    .counter:before {
      content: counters(counter, ".") '.';
    }
  </style>
</head>

<body>
<p>CSS计数器只能跟content属性在一起的时候才有作用，而content属性貌似专门用在before/after伪元素上的。于是，就有了，“计数器↔伪元素↔content属性”的铁三角关系。</p>
<p>CSS计数器的2个属性和1个方法</p>
<div class="reset">
  <div class="counter">
    counter-reset
    <div class="reset">
      <div class="counter">
        它是"计数器-重置”的意思,主要作用就是给计数器起个名字
      </div>
      <div class="counter">
        它可以设置初始值,默认是0;(在计数器名字后面设置,如设置初始值为2:counter-reset: counter 2;)
      </div>
      <div class="counter">
        counter-reset的计数重置可以是负数,也可以写成小数，不过就是IE和FireFox都不识别.
      </div>
    </div>
  </div>
  <div class="counter">
    counter-increment
    <div class="reset">
      <div class="counter">
        它是计数器-递增”的意思,值为counter-reset的1个或多个关键字.
      </div>
      <div class="counter">
        它后面可以跟随数字，表示每次计数的变化值。如果缺省，则使用默认变化值1.
      </div>
      <div class="counter">
        普照规则 ：普照源(counter-reset)唯一，每普照(counter-increment)1次，普照源增加1次计数值。
      </div>
    </div>
  </div>
  <div class="counter">
    counter()/counters()
    <div class="reset">
      <div class="counter">
        counter(name, style)
        这里的style参数还有有些名堂的。其支持的关键字值就是list-style-type支持的那些值。作用是，我们递增递减可以不一定是数字，还可以是英文字母，或者罗马文等。如content:
        counter(wangxiaoer, lower-roman); 以小写罗马数字格式表示当前计数器wangxiaoer的值
        <p>list-style-type：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha |
          none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana |
          katakana-iroha | lower-latin | upper-latin</p>
      </div>
      <div class="counter">
        counters(name, string);几乎可以说是嵌套计数的代名词。string参数为字符串（需要引号包围的）（必须参数），表示子序号的连接字符串。例如1.1的string就是'.', 1-1就是'-'.
      </div>
      <div class="counter">
        “普照源是唯一的”，所以，如果你在只在body标签上设置counter-reset，就算里面的子元素嵌套了祖宗十八代，还是不会有任何嵌套序号出现的！所以，要想实现嵌套，必须让每一个列表容器拥有一个“普照源”，通过子辈对父辈的counter-reset重置、配合counters()方法才能实现计数嵌套效果
      </div>
    </div>
  </div>
</div>
</body>

</html>
